<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>SNAP Retailer Locator</title>
    <meta charset='utf-8' />
    <meta content='width=device-width, initial-scale=1.0' name='viewport' />
    <meta content='' name='description' />
    <meta content='' name='author' />
    <!-- Styles -->
    <link rel="stylesheet" href="styles/bootstrap.css"/>
    <link rel="stylesheet" href="styles/bootstrap-responsive.css"/>
    <link rel="stylesheet" href="styles/custom.css"/>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class='container-fluid'>
      <div class='page-header'>
        <h1>
          <a href='#'>SNAP Retailer Locator</a> 
          <small>Demo Using <a href='http://derekeder.com/searchable_map_template/'>Derek Eder's Searchable Map Template</a></small>
        </h1>
      </div>
      <div class='row-fluid'>
        <div class='span3'>
          <div class='well'>
            <h4>
              Address <small>(<a id='findMe' href='#'>find me</a>)</small>
            </h4>
            <input class='input-block-level' id='txtSearchAddress' placeholder='Enter an address or an intersection' type='text' />
            <label>
              within
              <select class='input-small' id='ddlRadius'>
                <option value='400'>2 blocks</option>
                <option value='805'>1/2 mile</option>
                <option value='1610'>1 mile</option>
                <option value='3220'>2 miles</option>
                <option value='8047'>5 miles</option>
                <option value='16094'>10 miles</option>
              </select>
            </label>
            <!-- <h4>
              Recycling services
            </h4>
            <ul class='inputs-list unstyled'>
              <li>
                <label class='checkbox inline'>
                  <input type='checkbox' id='cbType1' />
                  <span class='filter-box filter-blue'></span>
                  City drop-off location
                </label>
              </li>
              <li>
                <label class='checkbox inline'>
                  <input type='checkbox' id='cbType2' />
                  <span class='filter-box filter-green'></span>
                  Private business
                </label>
              </li>
              <li>
                <label class='checkbox inline'>
                  <input type='checkbox' id='cbType3' />
                  <span class='filter-box filter-red'></span>
                  Hazardous materials
                </label>
              </li>
            </ul> -->
            <hr />
            <input class='btn btn-primary btn-large' id='btnSearch' type='button' value='Search' />
            <button class='btn' id='reset'>Reset</button>
          </div>
          <p class='alert alert-info lead' id='resultCount'></p>
        </div>
        <div class='span9'>
          <div id='mapCanvas'></div>
          <p class='pull-right'>
            Map and <a href='http://derekeder.com/searchable_map_template/'>search template</a> by <a href='http://derekeder.com'>Derek Eder</a>.
        </p>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="source/jquery.js"></script>
    <script type="text/javascript" src="source/bootstrap.js"></script>
    <script type="text/javascript" src="source/jquery.address.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript" src="source/maps_lib.js"></script>
    <script type='text/javascript'>
      //<![CDATA[
        $(window).resize(function () {
          var h = $(window).height(),
            offsetTop = 130; // Calculate the top offset
        
          $('#mapCanvas').css('height', (h - offsetTop));
        }).resize();
        
        $(function() {
          MapsLib.initialize();
          $(':checkbox').click(function(){
            MapsLib.doSearch();
          });
          
          $('#ddlRadius').change(function(){
            MapsLib.doSearch();
          });
          
          $('#btnSearch').click(function(){
            MapsLib.doSearch();
          });
          
          
          
          $('#findMe').click(function(){
            MapsLib.findMe(); 
            return false;
          });
          
          $('#reset').click(function(){
            $.address.parameter('address','');
            MapsLib.initialize(); 
            return false;
          });
          
          $("#txtSearchAddress").keydown(function(e){
              var key =  e.keyCode ? e.keyCode : e.which;
              if(key == 13) {
                  $('#btnSearch').click();
                  return false;
              }
          });
        });
      //]]>
    </script>
  </body>
</html>